const e = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="开关形状">
      <s-radio-group v-model="switchOptions.shape" :options="shapeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="开关主题">
      <s-radio-group v-model="switchOptions.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示文本">
      <s-radio-group v-model="switchOptions.withLabel" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="开关示例">
      <s-flex gap="1em">
        <s-switch
          v-model="switchOptions.value"
          :size="switchOptions.size"
          :shape="switchOptions.shape"
          :theme="switchOptions.theme"
          :with-label="switchOptions.withLabel"
        ></s-switch>
        <s-switch
          v-model="switchOptions.value"
          :size="switchOptions.size"
          :shape="switchOptions.shape"
          :theme="switchOptions.theme"
          :with-label="switchOptions.withLabel"
          readonly
        ></s-switch>
        <s-switch
          v-model="switchOptions.value"
          :size="switchOptions.size"
          :shape="switchOptions.shape"
          :theme="switchOptions.theme"
          :with-label="switchOptions.withLabel"
          disabled
        ></s-switch>
      </s-flex>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  SWITCH_SHAPE_DEFAULT,
  SWITCH_SHAPE_LABEL,
  SWITCH_SHAPE_OPTIONS,
  SWITCH_THEME_DEFAULT,
  SWITCH_THEME_LABEL,
  SWITCH_THEME_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class SwitchDemo extends Vue {
  /**
   * @description: 形状列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly shapeList = SWITCH_SHAPE_OPTIONS.map((shape) => ({
    value: shape,
    label: SWITCH_SHAPE_LABEL.get(shape),
  }));

  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = SWITCH_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: SWITCH_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  /**
   * @description: 开关配置项
   * @private
   * @type {Object}
   */
  switchOptions = {
    size: "medium",
    shape: SWITCH_SHAPE_DEFAULT,
    theme: SWITCH_THEME_DEFAULT,
    withLabel: false,
    value: false,
  };
}
<\/script>

<style lang="scss" scoped></style>
`; export { e as default };
